<template>
  <div>
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="time" label="直播时间" width="300" />
      <el-table-column prop="status" label="直播间信息" width="">
        <template slot-scope="scope">
          <div class="d-flex-c">
            <el-avatar :size="50" :src="scope.row.info.img" class="border" />
            <div class="d-flex-colomn">
              <span style="width: 150px">{{ scope.row.info.name }}</span>
              <span style="width: 150px">房间号：{{ scope.row.info.number }}</span>
              <span style="width: 150px">主播：{{ scope.row.info.man }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="直播状态" width="150" />
      <el-table-column label="操作">
        <template>
          <span class="blue mr-100">直播商品</span>
          <span class="red">删除</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          time: '2020年5月26日-2020年5月27日',
          status: '未直播',
          info: {
            img: 'https://zhixiu-picture.oss-cn-shanghai.aliyuncs.com/aec09f76b19a3e4a27a027a92173083c0f05a910.JPG',
            name: '测试直播间',
            number: '123456',
            man: '狗狗'
          }
        }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/el-table.scss';
.d-flex-s{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.flex-1{
	flex: 1;
}
.d-flex-c{
	display: flex;
	justify-content: center;
	align-items: center;
}
.d-flex-colomn{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.blue{
	color: #409EFF;
}
.red{
	color: #F56C6C;
}
.mr-100{
	margin-right: 100px;
}
</style>
